<template>
  <div>
    <CategorySelector :disabled="!isShowAttrList" />
    <AttrList
      v-if="isShowAttrList"
      @isUpdateShowAttrList="updateShowAttrList"
      @updateAttr="updateAttr"
    />
    <AddAttr
      v-if="!isShowAttrList"
      :edit-attr="editAttr"
      @isUpdateShowAttrList="updateShowAttrList"
    />
  </div>
</template>

<script>
import CategorySelector from '@/components/CategorySelector'
import AddAttr from './addAttr'
import AttrList from './attrList'
export default {
  name: 'Attr',
  components: {
    CategorySelector,
    AddAttr,
    AttrList
  },
  data() {
    return {
      isShowAttrList: true,
      editAttr: {}
    }
  },
  methods: {
    updateShowAttrList(val) {
      this.isShowAttrList = val
    },
    updateAttr(attr) {
      this.editAttr = attr
      this.isShowAttrList = false
    }
  }
}
</script>
